<template>
  <div class="user-wrapper">
    <div class="top-bac">
      <img src="../../assets/people.png" class="img-people">
    </div>
    
    <div class="head-card">

      <div class="head-img-wrapper">
        <div class="head-img">
          <img src="../../assets/1.png" class="touxiang">
        </div>
      </div>
      <!--用户名和id-->
      <div class="username">热心市民李小姐</div>
      <div class="id">ID：123455555</div>
      <div class="hr"></div>
      <div class="item-wrapper">
        <div class="item">
          <span class="text">红包</span>
          <span class="number">218</span>
        </div>
        <div class="item">
          <span class="text">优惠券</span>
          <span class="number">12张</span>
        </div>
        <div class="item">
          <span class="text">鲜豆</span>
          <span class="number">88</span>
        </div>
        <div class="item">
          <span class="text">白条</span>
          <span class="number">1000</span>
        </div>
      </div>
    
    </div>

    <div class="footer-wrapper">
      <div class="footer">
        <div class="img"><img src="../../assets/mymoney.png" class="img"></div>
        <div class="wenzi">我的钱包</div>
        <div class="xiao">></div>
      </div>
      <div class="footer">
        <div class="img"><img src="../../assets/myadress.png" class="img"></div>
        <div class="wenzi" @click="address">我的地址</div>
        <div class="xiao">></div>
      </div>
      <div class="footer">
        <div class="img"><img src="../../assets/server.png" class="img"></div>
        <div class="wenzi">客服与帮助</div>
        <div class="xiao1">></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  methods:{
    address(){
      console.log("跳转至地址页面")
      this.$router.push('/Adress')
    }
  }
}
</script>

<style lang="css" scoped>
/* @import "./assets/css/pro.css"; */
.top-bac{
   background-image: linear-gradient(239deg, #3A6FF3 0%, #50C7FB 100%);
   height: 55vw;
   border-bottom-left-radius: 50%;
   border-bottom-right-radius: 50%;
 }
.img-people{
  width: 8vw;
  height: 8vw;
  margin: 6vw 0vw 0vw 87vw;
}
 .head-card{
   background-color: white;
   width: 90vw;
   margin: -35vw 5vw 0 5vw;
  
   border-radius:2vw ;
   box-shadow: 0 1vw 2vw 0 rgb(0 0 0 / 13%);
 }
 .head-img-wrapper{
   display: flex;
   justify-content: center;
   position: relative;
   height: 15vw;
 }
 .head-img{
   width: 30vw;
   height: 30vw;
   /* background-color: green; */
   margin: 0 auto 0 auto;
   border-radius: 50%;
   position: absolute;
   top: -15vw;
 }
 .touxiang{
    width: 30vw;
   height: 30vw;
   border-radius: 50%;
 }
 .username{
   font-size: 5.5vw;
   color: #262628;
   text-align: center;
   margin-top: 3vw;
 }
 .id{
   font-size: 3.5vw;
   color: #c1c0c9;
   text-align: center;
   margin-top: 1vw;
 }
 .hr{
   background-color: #c1c0c9;
   height: 0.1vw;
   margin: 1vw 0 1vw 0;
 }
 .item-wrapper{
   display: flex;
   justify-content: space-around;
   margin: 2vw 0 0 0;

 }
 .item{
   display: flex;
   flex-direction: column;
   /* 上下对齐 */
   align-items: center;
   justify-content: center;
   height: 20vw;
 }
 .text{
   color: #c1c0c9;
   font-size: 3.5vw;
 }
 .number{
   color: #262628;
   font-size: 5.5vw;
 }
 .footer-wrapper{
    background-color: white;
   width: 90vw;
   height: 40vw;
   margin: 10vw 0 0 5vw;
   border-radius:2vw ;
   box-shadow: 0 1vw 2vw 0 rgb(0 0 0 / 25%);
 }
 .footer{
   margin: 5vw 0 0 3vw;
   display: flex;
   line-height: 9vw;
 }
.img{
  width: 9vw;
  height: 9vw;
}
 .wenzi{
   font-size: 5vw;
   font-weight: 500;
   margin-left: 3.5vw;
 }
 .xiao{
    font-size: 5vw;
    margin-left: 47vw;
 }
 .xiao1{
    font-size: 5vw;
    margin-left: 42vw;
 }


 

</style>
